<template>
  <ContentWrap>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane v-for="(tab, index) in tabsList" :key="index" :label="tab.label" :name="tab.value" />
    </el-tabs>
    <div class="tab-content">
      <div v-for="(data, index) in tabDatas" :key="index">
        <div :class="data-title">
          <div>{{ data.title }}</div>
          <div>{{ data.value }}</div>
        </div>
        <div class="data-content">
          <div v-for="(list, i) in data.list" :key="i" class="data-item">
            <div class="data-row">
              <div>
                <span>模型名称:</span>
                <el-input v-model="list.name" readOnly />
              </div>
              <div>
                <span>准确率:</span>
                <el-input v-model="list.accuracy" readOnly />
              </div>
            </div>
            <div class="data-row">
              <div>
                <span>识别缺陷:</span>
                <el-input v-model="list.name" readOnly />
              </div>
              <div>
                <span>正确率:</span>
                <el-input v-model="list.accuracy" readOnly />
              </div>
            </div>
            <div class="data-row">
              <div>
                <span>评测得分:</span>
                <el-input v-model="list.score" readOnly />
              </div>
              <div>
                <span>误判率:</span>
                <el-input v-model="list.accuracy" readOnly />
              </div>
            </div>
            <div class="data-row">
              <div>
                <span>评价时间:</span>
                <el-input v-model="list.time" readOnly />
              </div>
              <div>
                <span>漏检率:</span>
                <el-input v-model="list.accuracy" readOnly />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </ContentWrap>

</template>

<script setup lang="ts">

import { TabsPaneContext } from 'element-plus'
/** 评测概览 页面 */
defineOptions({ name: 'EvaluationOverview' })

const loading = ref(true) // 列表的加载中
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    // const data = await EvaluationTaskApi.getEvaluationTaskPage(queryParams)
    // list.value = data.list
  } finally {
    loading.value = false
  }
}
// 标签页列表
const tabsList = reactive([
  { label: '输电', value: 0 },
  { label: '变电', value: 1 },
  { label: '配电', value: 2 },
  { label: '安监', value: 3 },
  { label: '营销', value: 4 },
  { label: '基建', value: 5 }
])
const tabDatas = reactive([
  {
    title: '输电专业模型评测总次数',
    value: 2341, 
    list: [
      {
        name: '模型名称1',
        score: 87.5,
        accuracy: '60%',
        time: '2024.4.10 12:00:00'
      },
      {
        name: '模型名称2',
        score: 89,
        accuracy: '60%',
        time: '2024.4.10 14:00:00'
      }
    ]
  },
  {
    title: '输电专业模型最高得分',
    value: 100,
    list: [
      {
        name: '模型名称1',
        score: 87.5,
        accuracy: '60%',
        time: '2024.4.10 12:00:00'
      },
      {
        name: '模型名称2',
        score: 89,
        accuracy: '60%',
        time: '2024.4.10 14:00:00'
      }
    ]
  }
])
/** tab 切换 */
const queryParams = reactive({
  type: 0
})
const handleTabClick = (tab: TabsPaneContext) => {
  queryParams.type = tab.paneName
  // handleQuery()
}


/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<style scoped lang="scss">
.data-title {
  width: 376px;
  height: 298px;
  &:first-child {
    background: linear-gradient(235deg, #17C6C0 0%, #01B4CA 100%);
  }
  &:last-child {
    background: linear-gradient(235deg, #FF9D26 0%, #FF9C44 100%);
  }
  
}
</style>